<template>
  <div>商品列表
    <el-table :data="productList" style="width: 100%">
      <el-table-column  label="商品" width="300">
        <template #default="scope">        
          <el-image :src=" scope.row.gallery.split('|')[0]" style="width:160px">
          </el-image>
          <p>{{ scope.row.productName }}</p>
          <p>价格：{{ scope.row.price }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="specs" label="规格" width="180" />
      <el-table-column prop="cateName" label="分类" />
      <el-table-column label="商品码" width="260" >
        <template #default="scope"> 
        <p>商品码：{{ scope.row.produceId }}</p>
        <p>条形码：{{ scope.row.id }}</p>
        </template>    
      </el-table-column>
      <el-table-column prop="online" label="是否启用" />
      <el-table-column  label="操作">
        <template #default>
          <el-button link type="primary">编辑</el-button>
          <el-button link type="default">删除</el-button>
        </template>
      </el-table-column >
    </el-table>
  </div>
</template>

<script setup>
// 导入接口
 import {GetProduct} from '@/api/product.js'
//  响应式ref
 import {ref} from 'vue'
//  搜索条件
 const search = ref({order:'desc'})
//  商品列表
 const productList = ref([])
//  获取商品列表的方法
 function getProduct(){
  // 执行获取商品列表的api
  GetProduct(search.value)
  .then(res=>{
    // 请求成功
    productList.value = res.data.data;
  })
 }
 getProduct();
</script>

<style lang="scss" scoped></style>